<template>
  <div>
      <div class="back" @click="$router.go(-1)">
          <div class="backbox">
              <span class="iconfont icon-xiangzuojiantou lf"></span>
              <span>我的听歌排行榜</span>
          </div>
      </div>
    <van-tabs animated>
        <van-tab  :title="'最近一周'">
            <div class="weekBox">
                无结果
            </div>
        </van-tab>
        <van-tab  :title="'所有时间'">
            <div class="AlllistsBox">
                <ul>
                    <li v-for="(item,index) in Alllists" :key="index" @click="play(item.song.id)">
                        <div class="number">{{index+1}}</div>
                        <div class="AllBox">
                            <h4>{{item.song.name}}</h4>
                            <p>{{item.song.ar[0].name}} - {{item.song.al.name}}</p>
                        </div>
                        <div class="bofang">
                            <span class="iconfont icon-bofang bofa"></span>
                            <span>{{item.playCount}}次</span>
                        </div>
                    </li>
                </ul>
            </div>
        </van-tab>
    </van-tabs>
  </div>
</template>

<script>
import Vue from 'vue';
import { Tab, Tabs } from 'vant';
import {getUserRecord} from "../../api/rank"

Vue.use(Tab);
Vue.use(Tabs);
export default {
    data(){
        return{
            Alllists:[],// 总播放列表
            weeklists:[],// 周播放列表
            name:null,// 歌手名
            songname:null,// 歌名
            num:0,// 播放数量
            album:null,// 专辑名字
        }
    },
    methods:{
        // 播放歌曲
        play(id){
            console.log(id)
            this.$emit("get-player-id",id)
        },
        // 获取用户播放历史记录接口
        getUserRecordFun(){
            // 获取总播放列表
            getUserRecord({uid:window.localStorage.uid,type:0}).then(data=>{
                console.log('总播放',data.allData)
                this.Alllists = data.allData
            });
            // 获取周播放列表
            getUserRecord({uid:window.localStorage.uid,type:1}).then(data=>{
                console.log('周播放',data)
            });
        },
    },
    created(){
        this.getUserRecordFun();// 获取用户播放历史记录接口
        window.document.body.style.backgroundColor='#fff';
    }
}
</script>

<style lang="less">
.back{
    height: 50px;
    line-height: 50px;
    background-color: #D44439;
    .backbox{
        color: #eee;
        font-weight: bold;
        .lf{
            font-size: 18px;
            padding: 12px;
        }
    }
}
.AlllistsBox{
    border-top: 1px solid #ccc;
    ul{
        li{
            display: flex;
            align-items: center;
            margin: 8px 0px;
            .number{
                flex: 2;
                line-height: 41px;
                text-align: center;
            }
            .AllBox{
                flex: 11;
                h4{
                    font-weight: bold;
                }
                p{
                    font-size: 12px;
                    color: #999;
                }
            }
            .bofang{
                flex: 3;
                color: #999;
                text-align: center;
                .bofa{
                    font-size: 12px;
                    color: #999;
                    padding-right:2px;
                }
                span{
                    font-size: 12px;
                }
            }
        }
    }
}
.weekBox{
    border-top: 1px solid #ccc;
    text-align: center;
    font-size: 14px;
    color: #999;
    padding-top: 60px;
}
</style>